<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .card {
            flex-basis: 200px;
            flex-grow: 1;
            min-height: 200px;
        }

        .card img {
            width: 100%;
            display: block;
        }

        .card div {
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            line-height: 2;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script src="./data.js"></script>
    <script>
        var container = document.querySelector('.container')
        picList.forEach(function (item) {
            // 创建一个div
            var card = document.createElement('div')
            card.className = 'card'
            // 创建一个img标签
            var img = document.createElement('img')
            // 默认显示占位图片
            img.src = 'imgs/loading.png'
            // 通过自定义属性保存真实图片地址
            img.dataset.url = item.url
            // 通过自定义属性记录真实图片的加载状态
            img.dataset.load = 'unload'
            // 创建一个div, 保存图片标题
            var title = document.createElement('div')
            title.innerText = item.author
            // 将img和title追加到card内部
            card.appendChild(img)
            card.appendChild(title)
            // 将card追加到container内部
            container.appendChild(card)
        })
        // 注册滚动事件
        window.onscroll = lazyLoad
        // 手动调用, 目的加载第一屏的真实图片
        lazyLoad()
        // 获取浏览器视口高度
        var innerHeight = window.innerHeight
        function lazyLoad() {
            var imgs = container.querySelectorAll('img')
            imgs.forEach(item => {
                // top: 表示图片元素顶部距离视口顶部的高度
                var { top,bottom } = item.getBoundingClientRect()
                // 判断每一个图片元素是否进入了浏览器可视区域
                if (top < innerHeight && bottom>0) {
                    if (item.dataset.load == 'unload') {
                        // 更新真实图片的加载状态
                        item.dataset.load = 'loaded'
                        // 通过自定义属性获取真实图片地址
                        var url = item.dataset.url
                        console.log('加载真实图片');
                        // 加载真实图片
                        item.src = url
                    }

                }
            })
        }
    </script>
</body>

</html>